<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3616992_1axz58wl1lh.css?spm=a313x.7781069.1998910419.76&file=font_3616992_1axz58wl1lh.css">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul,li{
            list-style: none;
        }
        header{
            width: 600px;
            margin: 30px auto;
        }
        .list{
            width: 600px;
            margin: 0 auto;
        }
        .list li{
            /* 弹性盒 */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .list li span{
            /* margin-right没有固定值即最左边顶格，right-auto顶在最左边，再设置left
            margin-right: auto; 
            margin-left: 20px; */

            /*span占据剩下得所有空间；如果是input:flex:1,span:flex:2 button:flex:1 则span占所有得2/4空间  */
            /* 实现左边顶格 */
            flex: 1; 
            text-indent: 20px;
            /* text-indent是用来设定文本块中第一行的缩进。 */
        }
        .list i{
            color: red;
        }
    </style>
</head>
<body>
    <header>
        <input id="input" type="text">
        <button class="add">添加</button>
    </header>
    <ul class="list">
        <li>
            <input type="checkbox">
            <span>contentcontentcontentcontentcontentcontentcontent</span>
            <!-- <button>删除</button> -->
            <time>2022-8-31 10:10:30</time>
            <i class="iconfont icon-shanchu"></i>
        </li>
        <li>
            <input type="checkbox">
            <span>contentcontentcontentcontentcontentcontentcontent</span>
            <time>2022-8-31 10:10:30</time>
            <i class="iconfont icon-shanchu"></i>
        </li>
    </ul>
    <!-- 先引用utils.js相当于声名了utils.js里定义的函数,没有模块化的东西，正常的引入
    <script src="./src/utils/utils.js"></script> 
    <script src="./src/index.js"></script> -->

    <!-- 有模块化import export 在js里面导入则再倒入index.js需要type
    <script type="module" src="./src/index.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> -->

    <!-- <script src="./dist/bundle.js"></script> -->

    <script>
        // 项目依赖
        // console.log($)  //引用 $是jquery里面封装好的函数
        // console.log($(".list"))
        // $(".list").click(function(){
        //     console.log('jquery')
        // })    
    </script>
    <script>
        // 右键点击在集成终端打开可以写命令，点击x 没用结束服务只是隐藏了
        // ctrl+反引号`可以再次打开
        // 点击垃圾桶的图标是关闭服务或者ctrl+c

        // 构建工具(webpack-模块打包机)

        // cd <fileName> - 文件夹名 进到某一个文件内
        // cd .. - 返回上一层文件夹

        // 安装：npm install <packageName> == npm i <packageName>
        // 卸载：npm uninstall <packageName>

        // npm i <pname> --save-dev == npm i <pname> -D 安装开发依赖(环境依赖，与代码没有任何关系，起到解析代码的作用 工具：铲子)
        // npm i <pname> 不加后面的参数，默认是项目依赖(真正的要用：菜) 

        // 一、
        // (1)npm init (-y) 项目初始化  jquery

        // 打包 安装webpack工具
        // (2)npm i webpack webpack-cil --save-dev
        // (3)npm i webpack webpack-cil -g -g是全局安装

        // 执行打包命令
        // (4)webpack 手动打包会出现一个dist文件夹 里面有一个bundle.js文件
        // <script src="./dist/bundle.js">引入这一个就可以正常运行

            
       
        // 二、
        // 自动打包 不会打包出来一个真实的文件没有dist文件存在了内存中
        // 在webpack.config.js中添加const HtmlWebpackPlugin = require('html-webpack-plugin');
        // 生成一个页面去存http://localhost:8080/(自动跳出来)

        // (1)(2)(3)环境准备好，

        // (4)npm i webpack-dev-server -D
        // (5)npm i html-webpack-plugin -D
        // (6)npm i webpack-dev-server -g

        // (7)webpack-dev-server HtmlWebpackPlugin(http://localhost:8080/) 监听代码变换，实时构建
        
        // 开发过程中，要实时看到运行效果：
        // (8)执行webpack-dev-server --open 会自动打开页面，可以实时更新

        // ctrl+c 按两次结束进程 结束进程，页面也就没有了

        // ··补充：
        // 配置命令
        // 在package.json中在 scripts 配置 start （简化webpack-dev-server --open名称为：start）
        // 以后启动项目执行npm start命令,自动跳出页面

        // ··注意：
        // (1)所以想运行项目，不要再open with live server了，
        // 从本地文件cmd执行npm start或者npm webpack-dev-server --open
        // 因为index.html里面啥也没有，没有引入script src
        // 执行命令之后构建一个虚拟的html，将js引入，才能有完整的功能

        // (2)传文件的时候不需要把nodemodels
        // (里面的文件都被package.json控制，知道package.json就可以知道它nodemodels所需要的文件),package-lock.json(没用)压缩打包
        // 根据package.json装所需要的包
        // 可以直接在文件夹里cmd
        // 执行npm i(他会自己根据package.json安装所需要的包，形成nodemodels)
        // 安装完之后，执行npm start就可以继续写自己的项目了
        // 关注package.json，可以知道用了那些东西，引了那些包，看src看半天也不知道看啥
        // 找入口文件，看看执行什么操作

        // npx create-react-app 名称
        
    </script>
    

    <!-- web开发一 web开发二 js进阶 h5c3 -->
    <!-- 移动web开发 -->
    <!-- 前端开发工程化：
        系统化
        模块化-js代码(import export)
        组件化-页面
        规范化
        自动化（下学期） -->
</body>
</html>